<template>
  <div class="collection-ad g-flex">
    <img class="head-img" :src="values.poster" alt="" >
    <div class="g-m-l-8">
      <div class="ad-name">合集合集合集合集</div>
      <div class="ad-data">454654</div>
    </div>
    <div class="ad-see g-m-l-a" @click="handleClick">查看合集 ></div>
  </div>
</template>

<script>

export default {
  name: 'CollectionAd',
  props: {
    values: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  emits: ['click'],
  setup(props, ctx) {
    const handleClick = () => ctx.emit('click')

    return {
      handleClick
    }
  }
}
</script>

<style lang="scss" scoped>
.g-flex {
  display: flex;
}
.g-tc {
  text-align: center;
}
.g-m-t-10 {
  margin-top: 10px;
}
.g-m-l-10 {
  margin-left: 10px;
}
.g-m-l-8 {
  margin-left: 8px;
}
.g-m-l-a {
  margin-left: auto;
}
.collection-ad {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 4px 13px;
  width: 234px;
  height: 40px;
  background: rgba(2, 0, 3, 0.3);
  border-radius: 4px;
  .head-img {
    width: 24px;
    height: 24px;
  }
  .ad-name {
    height: 15px;
    font-weight: 500;
  }
  .ad-data {
    height: 10px;
    transform: scale(.83);
    position: relative;
    left: -8px;
  }
  .ad-see {
    padding: 6px 8px;
    background: #FB7299;
    border: 1px solid #FB7299;
    border-radius: 10px;
    font-size: 9px;
    line-height: 9px;
    transform: scale(.75);
  }
}
</style>